<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成都市退役老兵专题</title>
    <link rel="stylesheet" type="text/css" href="css/retire.css">
    <link rel="stylesheet" href="node_modules/swiper/dist/css/swiper.min.css">
</head>
<body>
<div class="container">
    <div class="head_img">
        <img  src="image/retire/retire.jpg">
    </div>

    <div class="box">
        <!-- Swiper 容器 -->
        <div class="swiper-container">
            <div class="swiper-button-prev swiper-button-white"></div> <!-- 左切换按钮 -->
            <div class="swiper-button-next swiper-button-white"></div> <!-- 右切换按钮 -->
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="swiper">
                        <img class="img" src="image/science/swiper1.jpg">
                        <div class="sign">
                            <a>
                                1.纪念中国人民志愿军抗美援朝出国作战74周年
                            </a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper">
                        <img class="img" src="image/science/swiper2.jpg">
                        <div class="sign">
                            <a>
                                2.纪念中国人民志愿军抗美援朝出国作战74周年
                            </a>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="swiper">
                        <img class="img" src="image/science/swiper3.jpg">
                        <div class="sign">
                            <a>
                                3.纪念中国人民志愿军抗美援朝出国作战74周年
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div> <!-- 分页器 -->
        </div>
    </div>

    <div class="show">
        <div class="title">
            <a>
                <img class="image" src="image/retire/keai.png">
            </a>
        </div>
        <div class="show_box">
            <div class="produce">
                <img class="image" src="image/retire/person.jpg">
                <div class="name">
                    <h3>魏天禄</h3>
                    <p>1930年出生,宁夏中宁人,1951年随部队入朝。</p>
                </div>
            </div>
            <div class="produce">
                <img class="image" src="image/retire/person.jpg">
                <div class="name">
                    <h3>魏天禄</h3>
                    <p>1930年出生,宁夏中宁人,1951年随部队入朝。</p>
                </div>
            </div>
            <div class="produce">
                <img class="image" src="image/retire/person.jpg">
                <div class="name">
                    <h3>魏天禄</h3>
                    <p>1930年出生,宁夏中宁人,1951年随部队入朝。</p>
                </div>
            </div>
            <div class="produce">
                <img class="image" src="image/retire/person.jpg">
                <div class="name">
                    <h3>魏天禄</h3>
                    <p>1930年出生,宁夏中宁人,1951年随部队入朝。</p>
                </div>
            </div>
        </div>
    </div>

    <div class="show">
        <div class="title">
            <a>
                <img class="image" src="image/retire/zixun.png">
            </a>
        </div>

        <div class="lump">
            <div class="lump_box">
                <img class="image" src="image/retire/person.jpg">
                <div class="fill btm">
                    <a>铭记抗美援朝精神，担当民族复兴重任</a>
                </div>
            </div>
            <div class="lump_box">
                <div class="fill top">
                    <a>铭记抗美援朝精神，担当民族复兴重任</a>
                </div>
                <img class="image" src="image/retire/person.jpg">
            </div>
            <div class="lump_box">
                <img class="image" src="image/retire/person.jpg">
                <div class="fill btm">
                    <a>铭记抗美援朝精神，担当民族复兴重任</a>
                </div>
            </div>
            <div class="lump_box">
                <div class="fill top">
                    <a>铭记抗美援朝精神，担当民族复兴重任</a>
                </div>
                <img class="image" src="image/retire/person.jpg">
            </div>
        </div>
    </div>

</div>

<script src="node_modules/swiper/dist/js/swiper.min.js"></script>
<script>
    // 当 DOM 准备好时，初始化 Swiper
    document.addEventListener('DOMContentLoaded', function () {
        var mySwiper = new Swiper('.swiper-container', {
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            pagination: '.swiper-pagination',
            loop: true,
            autoplay: 2500,
            autoplayDisableOnInteraction: false,
            effect: 'fade',
            paginationType: 'fraction',
        });
    });
</script>
</body>
</html>
